<template>
	<div>
		<span>{{ item.title }}</span>
		<button @click="remove(item.id)">删除</button>
	</div>
</template>

<script>
import { onBeforeUnmount, onUnmounted } from 'vue'
export default {
	name: 'Test',
	emits: ['remove'],
	props: {
		item: Object,
	},
	setup(props, ctx) {
		const remove = (id) => {
			ctx.emit('remove', id)
		}

		onBeforeUnmount(() => {
			console.log(`ID 为 ${props.item.id} 即将被删除 onBeforeUnmount`)
		})

		onUnmounted(() => {
			console.log(`ID 为 ${props.item.id} 被删除 onUnmounted`)
		})

		return {
			remove,
		}
	},
}
</script>

<style></style>
